﻿
@{
    ViewBag.Title = "Grammer";
}

<h2>Grammer</h2>

<ol>
    <li>
        基本语法与页面就绪函数
        <ol>
            <li>Jquery内置对象Jquery</li>
            <li>jquery将html、css、js分开来</li>
            <li>window.load在全部页面资源加载完成时执行</li>
            <li>jQuery(document).ready()在DOM载入时执行</li>
            <li>通常该方法用于替换window.onload事件，文档就绪函数执行效率更高</li>
            <li>文档就绪函数，用于执行页面加载成功后执行指定的代码</li>
        </ol>
    </li>
    <li>
        jQuery选择器-基础选择器
        <ol>
            <li>
                javascript中用于获取组建的方法通常用以下三个
                <ol>
                    <li>document.getElementById();//利用组件Id获取对象</li>
                    <li>document.getElementByName();//利用Name属性获取多个对象</li>
                    <li>document.getElementByTagName();//利用元素标签名获取</li>
                </ol>
            </li>
            <li>
                当是这三个方法不是万能的
                <ol>
                    <li>name属性中包含"container字符的组件删除"</li>
                    <li>将当前页中第三个元素隐藏</li>
                </ol>
            </li>
            <li>
                jQuery选择器就是为了解决Web前端编程如和获取组件的问题
            </li>
            <li>
                iQuery选择器的基本语法
                <ol>
                    <li>jQuery("选择器表达式")</li>
                    <li>$("选择器表达式")</li>
                </ol>
            </li>
            <li>其中，选择器表达式是我们要重点学习的内容</li>
            <li>
                选择器表达式安功能与用途可以分为8类
                <ol>
                    <li>基本选择器</li>
                    <li>属性选择器</li>
                    <li>位置选择器</li>
                    <li>叠层选择器</li>
                    <li>内容过滤器</li>
                    <li>表单过滤器</li>
                    <li>子过滤器</li>
                    <li>可见性选择器</li>
                </ol>
            </li>
            <li>
                基本选择器语法
                <ol>
                    <li>All Selector("*") 所有选择器</li>
                    <li>Class Selecter(".class")类选择器</li>
                    <li>Element Selector("element")元素选择器</li>
                    <li>Id Selector("#id")ID选择器</li>
                    <li>Multiple Selector("selector1","selector2",selectorN)组合选择器</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-基础选择器
        <ol>
            <li>在HTML文档中，元素的开始标志中通常包含有多个属性</li>
            <li>在jQuery中，出来直接用id和class属性作为选择器外，还可以根据各种属性根据查询到的元素进行过滤</li>
            <li>属性选择器包含在中括号中</li>
            <li>
                语法如下：
                <ol>
                    <li>$基本选择器[属性过滤选择器]</li>
                    <li>可以根据是否包含指定属性或者根据属性值从查询到的元素中筛选</li>
                </ol>
            </li>
            <li>
                常用的属性过滤器种类
                <ol>
                    <li>
                        属性过滤器
                        <ol>
                            <li>用于过滤给定属性等于某特定值得所有元素</li>
                            <li>格式：$("selector[attribute=value]")</li>
                        </ol>
                    </li>
                    <li>
                        开始过滤器
                        <ol>
                            <li>用于选定给定属性是以某特定值开始的所有元素</li>
                            <li>格式：$("selector[arrtibute^=value]")</li>
                        </ol>
                    </li>
                    <li>
                        结尾过滤器
                        <ol>
                            <li>用户选定给定属性以某特定值结尾的所有元素</li>
                            <li>格式：$("selector[attribute$=value]")</li>
                        </ol>
                    </li>
                    <li>
                        任意匹配过滤器
                        <ol>
                            <li>用于选择指定属性值包含给字符串的所有元素</li>
                            <li>格式：$("selector[attribute*=value]")</li>
                        </ol>
                    </li>
                    <li>
                        包含过滤器
                        <ol>
                            <li>用于选择包含给定属性的所有元素</li>
                            <li>格式：$("selector[attribute]")</li>
                        </ol>
                    </li>
                    <li>
                        属性包含单词过滤器
                        <ol>
                            <li>用于选择指定属性值中包含给定单词(由空格分隔)的元素</li>
                            <li>格式：$("selector[attribute~=value]")</li>
                        </ol>
                    </li>
                    <li>
                        属性不等于过滤器
                        <ol>
                            <li>用于选择不包含指定属性，或者包含指定属性但该属性不等于某个值的所有元素</li>
                            <li> 格式：$("selector[attribute!=value]")</li>
                        </ol>
                    </li>
                    <li>
                        复合属性过滤器
                        <ol>
                            <li>用于选择同时满足多个条件的所有元素</li>
                            <li>格式:$("selector[selector1][selector2]...[selector[N]")</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-位置选择器
        <ol>
            <li>jQuery同样允许我们根据元素的位置来选择元素</li>
            <li>
                位置选择器语法如下：
                <ol>
                    <li>$基本选择器：位置选择器</li>
                </ol>
            </li>
            <li>
                常用的位置选择器
                <ol>
                    <li>
                        选择第一个
                        <ol>
                            <li>格式：$("selector:first")</li>
                        </ol>
                    </li>
                    <li>
                        选择最后一个
                        <ol>
                            <li>
                                格式：$("selector:last")
                            </li>
                        </ol>
                    </li>
                    <li>
                        选择奇数行
                        <ol>
                            <li>格式：$("selector:odd")</li>
                        </ol>
                    </li>
                    <li>
                        选择偶数行
                        <ol>
                            <li>格式：$("selector:even")</li>
                        </ol>
                    </li>
                    <li>
                        获取指定位置
                        <ol>
                            <li>格式：$("selector:eq(n)")</li>
                        </ol>
                    </li>
                    <li>
                        大于指定位置
                        <ol>
                            <li>格式：$("selector:gt(n)")</li>
                        </ol>
                    </li>
                    <li>
                        小于指定位置
                        <ol>
                            <li>格式：$("selector:lt(n)")</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-层叠选择器
        <ol>
            <li>
                如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素，兄弟元素等，那么层叠选择器是一个非常好的选择。
            </li>
            <li>
                层叠选择器语法如下：
                <ol>
                    <li>"基准元素 层叠符号 目标元素"</li>
                </ol>
            </li>
            <li>
                层叠选择器的用法
                <ol>
                    <li>
                        后代选择器
                        <ol>
                            <li>格式：$("ancestor descendant")</li>
                        </ol>
                    </li>
                    <li>
                        子选择器
                        <ol>
                            <li>格式：$("parent>child")</li>
                        </ol>
                    </li>
                    <li>
                        相邻选择器
                        <ol>
                            <li>格式：$("prev+next")</li>
                        </ol>
                    </li>
                    <li>
                        兄弟选择器
                        <ol>
                            <li>格式：$("prev~siblings")</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-表单选择器
        <ol>
            <li>表单元素选择器用于获取指定表单元素的选择器，可以简化表单的操作</li>
            <li>表单选择器中，:冒号前面省略，什么都不写，表示选择所有，等同于*</li>
            <li>
                举例：
                <ol>
                    <li>$(":input")</li>
                    <li>$(":text")</li>
                    <li>$(":redio")</li>
                    <li>...</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        jQuery选择器-子元素选择器和可见性选择器
        <ol>
            <li>
                子元素选择器
                <ol>
                    <li>子元素选择器是允许利用子元素的位置进行获取的选择器</li>
                    <li>
                        子元素选择器的3种用法
                        <ol>
                            <li>
                                E:first-child
                                <ol>
                                    <li>选择所有位于其父元素的第一个位置的E元素</li>
                                </ol>
                            </li>
                            <li>
                                E:last-child
                                <ol>
                                    <li>选择所有位于其父元素的最后一个位置的E元素</li>
                                </ol>
                            </li>
                            <li>
                                E:first-child(n)
                                <ol>
                                    <li>选择所有位于其父元素的指定位置的E元素</li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>
                可见性选择器
                <ol>
                    <li>
                        获取当前可见，不可见的元素
                    </li>
                    <li>
                        可见性选择器的用法
                        <ol>
                            <li>
                                E:hidden
                                <ol>
                                    <li>选择所有不可见的元素</li>
                                    <li>隐藏域，diaplay='none',width与height等于零的元素也会被选中</li>
                                </ol>
                            </li>
                            <li>
                                E:visable
                                <ol>
                                    <li>选择所有可见的元素</li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        访问和设置属性
        <ol>
            <li>
                jQuery的属性函数
                <ol>
                    <li>
                        attr(name|properties|key)
                        <ol>
                            <li>传递一个属性名表示获取</li>
                            <li>可以对一个元素传递JSON对象进行多个属性设置</li>
                            <li>可以同时使用attr对多个元素赋值</li>
                            <li>如果在前面的选择器中获取多个元素的话，那么只能获取第一个元素的属性</li>
                        </ol>
                    </li>

                    <li>removeAttr(name)</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        访问和设置元素内容
        <ol>
            <li>
                jQuery有关于获取和设置内容的函数
                <ol>
                    <li>
                        html(html片段)
                        <ol>
                            <li>设置或获取指定元素的html片段</li>
                        </ol>
                    </li>
                    <li>
                        text(text文本)
                        <ol>
                            <li>设置或获取指定元素的text文本</li>
                        </ol>
                    </li>
                    <li>
                        val(值或数组)
                        <ol>
                            <li>设置或指定输入项的值</li>
                        </ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        访问与设置样式
        <ol>
            <li>使用.css()访问元素的样式</li>
            <li>使用.css()设置元素的样式</li>
            <li>
                使用addClass()设置元素的class
                <ol>
                    <li>可以同时传入多个样式，中间用空格隔开。</li>
                </ol>
            </li>
            <li>
                使用removeClass()移除元素的class
                <ol>
                    <li>如果removeClass()中不传入任何内容，则表示移除所有的class</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        访问元素的尺寸和坐标
        <ol>
            <li>
                width()、height()
                <ol>
                    <li>获取第一个匹配元素当前计算的宽度/高度（px）</li>
                </ol>
            </li>
            <li>
                标准的盒子模型
                <ol>
                    <li>外补丁</li>
                    <li>边框</li>
                    <li>内补丁</li>
                    <li>内容</li>
                </ol>
            </li>
            <li>
                position()
                <ol>
                    <li>获取的是相对于父元素的偏移</li>
                </ol>
            </li>
            <li>
                offset()
                <ol>
                    <li>获取窗口在当前视角的相对偏移</li>
                </ol>
            </li>
            <li>
                innerWidth(),innerHeigh()
                <ol>
                    <li>获取第一个匹配元素内尺寸（不包含边框）</li>
                </ol>
            </li>
            <li>
                outerWidth(),outerHeigh()
                <ol>
                    <li>获取宽口外尺寸（不包含外补丁）</li>
                </ol>
            </li>
            <li>
                outerWidth(true),outerHeigh(true)
                <ol>
                    <li>代表在计算尺寸的时候，把外边距也算在内</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        事件处理机制-绑定事件
        <ol>
            <li>
                on
                <ol>
                    <li>
                        用于为选中函数绑定事件的函数，它通常有两个参数
                        <ol>
                            <li>第一个代表绑定的事件类型</li>
                            <li>第二个参数是一个函数，表示要执行的操作</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>mouseover鼠标进入事件</li>
            <li>mouseout鼠标离开事件</li>
            <li>keydown键盘按下事件</li>
            <li>keyup键盘抬起事件</li>
            <li>利用one函数为对象绑定一次性事件，一次性事件表示函数只能触发一次，可以用来防止反复提交，这是和on的主要区别</li>
            <li>利用trigger来触发绑定元素的指定事件，用什么方式绑定的，就会以什么样的形式触发</li>
            <li>利用off解除所选择元素的事件绑定</li>
            <li>如果为所选元素进行了多次事件绑定，则表示会按照绑定的顺序执行</li>
        </ol>
    </li>
    <li>
        事件处理机制-鼠标事件
        <ol>
            <li>鼠标进入的时候触发mouseover,移出时触发mouseout</li>
            <li>在jQuery中提供了一个简化函数hover()</li>
            <li>对于整个文档鼠标事件，直接选中document对象</li>
            <li>在事件处理函数中，有一个参数默认为"事件对象event"</li>
            <li>
                它包含了事件所产生的信息
                <ol>
                    <li>event.pageX鼠标在文档上的X坐标</li>
                    <li>event.pageY鼠标在文档上的Y坐标</li>
                </ol>
            </li>
            <li>事件的沿着DOM父元素向后代传播</li>
            <li>在jQuery中为了简化我们的操作，对于on里面的事件名提供了等价的函数例如:click->click()、mouseove->mousemove()</li>
            <li>event.stopPropagation():停止事件的传播</li>
        </ol>
    </li>
    <li>
        事件处理机制-键盘事件
        <ol>
            <li>
                keydown
                <ol>
                    <li>键盘按下时触发的事件</li>
                </ol>
            </li>
            <li>
                keyup
                <ol>
                    <li>键盘按下时触发的事件</li>
                </ol>
            </li>
            <li>
                keypress
                <ol>
                    <li>按键按下-抬起完整过程触发的事件</li>
                </ol>
            </li>
            <li>利用event.keyCode获取当前按下的按键的ascii码</li>
            <li>当keydown事件处理函数返回false的时候，本次事件被忽略</li>
        </ol>
    </li>
    <li>
        事件处理函数-表单事件
        <ol>
            <li>focus:被选中的元素获得焦点时触发</li>
            <li>blur:被选中的元素失去焦点时触发</li>
            <li>change:内容发生变化并失去焦点时触发</li>
            <li>select同样有change事件，在改变选项时触发事件</li>
            <li>submit:提交表单前触发，可以通过这个事件来控制表单是否提交</li>
        </ol>
    </li>
    <li>
        动画函数-显示和隐藏
        <ol>
            <li>可以通过设置元素display属性来实现显示和隐藏(block/none)</li>
            <li>可以通过使用hide(1000)来实现隐藏,1000表示隐藏的过度事件，还可以在后面增加一个函数来实现隐藏后的操作</li>
            <li>可以通过使用show(1000)来实现隐藏,1000表示显示的过度事件，还可以在后面增加一个函数来实现显示后的操作</li>
            <li>hide/show缩放方式实现隐藏</li>
            <li>slidUp/slidDown拉窗帘效果</li>
            <li>fadeOut/fadeIn渐入渐出效果</li>
        </ol>
    </li>
    <li>
        动画函数-自定义动画
        <ol>
            <li>在jQuery中，animate函数实现动画效果</li>
            <li>animate里面的参数为css样式</li>
            <li>使用queue来开启队列</li>
            <li>在jQuery中animate不支持颜色和动画渐变</li>
        </ol>
    </li>
</ol>